<template>
  <div>
      <van-nav-bar :title="`${$route.query.key} 的搜索结果`"/>
      <van-list v-model="isLoading" :finished="finished" @load="onLoad">
          <van-cell v-for="item in list" :key="item.art_id" :title="item.title" @click="$router.push(`/article?id=${item.art_id}`)"/>
      </van-list>
  </div>
</template>

<script>
import { searchAPI } from '@/api/search'
export default {
    data () {
        return {
            list: [],
            isLoading: false,
            finished: false,
            page: 1
        }
    },
    methods: {
        async onLoad () {

            const res = await searchAPI({
                page: this.page,
                q: this.$route.query.key
            })
            
            // 查完这一页马上让page++，方便下次查下一页
            this.page++
            this.list.push(...res.data.results)

            // 把本次loading改为false
            this.isLoading = false

            // 判断加载完成:就是判断数组长度是否大于等于总数量
            if (this.list.length >= res.data.total_count) {
                this.finished = true
            }
        }
    }
}
</script>

<style>

</style>